<template>
    <div
        :key="key"
        :style="{
            width: detail.style.position.w + 'px',
            height: detail.style.position.h + 'px',
            color: detail.style.foreColor,
        }"
        class="tableClass"
    >
        <div>
            <el-table
                :border="false"
                v-loading="loading"
                :cell-style="{ background: this.detail.style.backColor, color: this.detail.style.foreColor }"
                :data="orderList"
                :header-cell-style="{ background: this.detail.style.backColor, color: this.detail.style.foreColor }"
                :row-style="{ background: this.detail.style.backColor, color: this.detail.style.foreColor }"
            >
                <el-table-column align="center" label="序号" type="index" />
                <el-table-column align="center" label="工单编号" prop="repairNumber" />

                <el-table-column align="center" label="设备编号" prop="device.serialNumber" />
                <el-table-column align="center" label="设备名称" prop="device.deviceName" />

                <el-table-column align="center" label="故障时间" prop="createTime" />
            </el-table>
            <Pagination
                v-show="false"
                :limit.sync="queryParams.pageSize"
                :page-size="10"
                :page-sizes="[5, 10, 15]"
                :page.sync="queryParams.pageNum"
                :style="{ background: this.detail.style.backColor, color: this.detail.style.foreColor }"
                :total="total"
                @pagination="getList"
            />
        </div>
    </div>
</template>

<script>
import BaseView from './View';
import request from '@/utils/request';
import moment from 'moment';

export default {
    name: 'view-warn',
    extends: BaseView,
    computed: {},
    data() {
        return {
            loading: false,
            orderList: [],
            total: 0,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                ztGuid: this.$route.query.guid,
                // deviceNow:"查询今天",
                orderByColumn: 'id',
                isAsc: 'desc',
            },
            timer: null,
            key: 0,
        };
    },
    mounted() {
        this.getList();
        this.timer = setInterval(() => {
            this.getList();
        }, 60000 * 5);
    },
    methods: {
        //格式化时间
        leaveTime(value) {
            return value;
            //return moment(value).format('HH:mm');
        },
        // 分钟数换算
        minTime(min) {
            let minTime = '';
            let h = Math.floor(min / 60);
            min -= h * 60;
            if (min == 0) {
                minTime = '0时1分';
            } else {
                if (min < 10) {
                    min = '0' + min;
                }
                if (h < 10) {
                    h = '0' + h;
                }
                minTime = (h ? h + '时' : '00:') + (min ? min + '' : '') + '分';
            }
            return minTime;
        },
        computeTime(row) {
            if (row.shutTime) {
                let date2 = new Date(row.shutTime);
                let date1 = new Date(row.createTime);
                let minuts = parseInt(Math.abs(date2 - date1) / 1000 / 60);
                return this.minTime(minuts);
            } else {
                return '无';
            }
        },
        getList() {
            this.loading = true;
            let url = '/equipmentRepair/listByztGuid';
            request({
                url: url,
                method: 'get',
                params: this.queryParams,
            }).then((res) => {
                this.orderList = res.data.list;
                this.total = res.total;
                this.loading = false;
            });
        },
    },
    beforeDestroy() {
        clearInterval(this.timer);
        this.timer = null;
    },
};
</script>

<style scoped>
.tableClass {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;
}

.el-input {
    background-color: brown !important;
    color: #fff !important;
}
</style>
